<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--物料数据-->
      <el-col :lg="6" style="padding-right: 2%; border-right: 1px #dcdfe6 solid">
        <div style="margin-bottom: 16px">
          <h4 style="padding: 0; margin: 0; color: #606266">物料检验层次</h4>
        </div>
        <div class="head-container">
          <el-input
            v-model="selectMaterialName"
            placeholder="请输入物料名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container">
          <el-tree
            :data="materialList"
            :props="{children: 'children', label: 'materialName'}"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            :highlight-current="true"
            ref="tree"
            node-key="materialId"
            empty-text="暂无数据"
            :default-expand-all="true"
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>

      <!--质检标准数据-->
      <el-col :lg="17" style="margin-left: 2%">
        <el-form :model="form" ref="form" :rules="rules" :inline="true" v-show="showSearch" label-width="80px">
          <el-form-item label="检验标准编码" prop="code" label-width="110px">
            <el-input
              v-model="form.code"
              placeholder="请输入检验标准编码"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item label="质检场景" prop="checkScene">
            <el-select
              v-model="form.checkScene"
              placeholder="请选择质检场景"
              style="width: 200px"
            >
              <el-option
                v-for="item in checkSceneOptions"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
                <span style="float: left">{{ item.dictCode }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictValue }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检验类型" prop="typeCode">
            <el-select
              v-model="form.typeCode"
              placeholder="请选择检验类型"
              style="width: 200px"
              @change="ChangeType"
            >
              <el-option
                v-for="item in checkTypeOptions"
                :key="item.dictCode"
                :label="item.dictValue"
                :value="item.dictCode"
              >
                <span style="float: left">{{ item.dictCode }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.dictValue }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="检验标准名称" prop="name" label-width="110px">
            <el-input
              v-model="form.name"
              placeholder="请输入检验标准名称"
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-document" size="mini" @click="submitForm" v-hasPermi="['quality:setting:addHH']">提交</el-button>
            <el-button type="warning" icon="el-icon-refresh" size="mini" @click="resetQuery">清除</el-button>
          </el-form-item>
        </el-form>

        <el-table
          v-loading="loading"
          :data="projectList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="60" align="center" />
          <el-table-column label="检验项目组件id" align="center" prop="id" v-if="false" />
          <el-table-column label="检验项目类别" align="center" prop="checkTypeName" />
          <el-table-column label="检验项目编码" align="center" prop="code" />
          <el-table-column label="检验项目名称" align="center" prop="name" />
          <el-table-column label="数据类型" align="center" prop="dataType" :formatter="getTypeName" />
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { addSetting, updateSetting } from "@/api/quality/setting";
  import { listProject } from "@/api/quality/project";
  import { listMaterial } from "@/api/base/material";

  export default {
    name: "SettingDetail",
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        selectMaterialName: undefined,
        // 检验场景下拉框
        checkSceneOptions: [],
        // 检验类型下拉框
        checkTypeOptions: [],
        // 质检关系表格数据
        projectList: [],
        // 物料树形数据
        materialList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          code: undefined,
          checkScene: undefined,
          typeCode: undefined,
          name: undefined
        },
        // 表单参数
        form: {
          code: undefined,
          checkScene: undefined,
          typeCode: undefined,
          name: undefined
        },
        // 表单校验
        rules: {
          checkScene: [{ required: true, message: "质检场景不能为空", trigger: "change" }],
          code: [{ required: true, message: "检验标准编码不能为空", trigger: "change" }],
          name: [{ required: true, message: "检验标准名称不能为空", trigger: "change" }]
        }
      };
    },
    watch: {
      // 根据名称筛选物料树
      selectMaterialName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getMaterialList();
      this.getList();
      // 数据字段
      this.getDicts("check_scene").then((response) => {
        this.checkSceneOptions = response.data;
      });
      this.getDicts("check_type").then((response) => {
        this.checkTypeOptions = response.data;
      });
    },
    methods: {
      /** 查询质检项目列表 */
      getList() {
        this.loading = true;
        listProject(this.queryParams).then(response => {
          this.projectList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      // 检验类型改变时
      ChangeType(code) {
        this.queryParams.checkTypeId = code;
        this.getList();
      },
      // 物料树
      getMaterialList() {
        listMaterial({}).then((response) => {
          this.materialList = response.rows;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.materialName.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.form.materialId = data.materialId;
      },
      // 数据类型
      getTypeName(row, column) {
        let name = '';
        switch(row.dataType) {
          case 1:
            name = '定性'
            break;
          case 2:
            name = '定量'
            break;
          default: console.log("no default")
        }
        return name;
      },
      // 表单重置
      reset() {
        this.form = {
          code: undefined,
          checkScene: undefined,
          typeCode: undefined,
          name: undefined
        };
        this.resetForm("form");
      },
      /** 提交按钮操作 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            addSetting(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess("新增成功");
              }
            });
          }
        });
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("form");
        this.queryParams = {
          pageNum: 1,
          pageSize: 10
        };
        this.getList();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id);
        this.form.projectIdList = this.ids;
      },
    }
  };
</script>
